<template>
  <div class="index-new-music-body main-border">
    <arrow arrow="left" :size="28" color="black" @click="clickArrow(0)" class="a-left"></arrow>
    <div class="new-music-list">
      <div v-for="(item,index) in data.slice(start,end)" :key="index" class="new-music-card">
        <div class="new-music-card-content cursor" v-if="item != {}">
          <img :src="item.img" style="width: 80%;height: auto" class="main-border">
          <div class="card-title text-line-1">{{item.title}}</div>
          <div class="card-author text-line-1 font-color-1">{{item.author}}</div>
        </div>
      </div>
    </div>
    <arrow arrow="right" :size="28" color="black" @click="clickArrow(1)" class="a-right"></arrow>
  </div>
</template>

<script>
import arrow from "../components/arrow";

export default {
  components: {arrow},
  name: "index-new-music",
  props: {
    data: Array
  },
  data() {
    return {
      start: 0,
      end: 4
    }
  },
  methods: {
    clickArrow(tag) {
      //console.log(tag)
      if (tag == 0 && (this.start - 5) >= 0) {
        this.start -= 5
        this.end -= 5
      } else if (tag == 1 && (this.start + 5) < this.data.length) {
        this.start += 5
        this.end += 5
      }
    }
  },
  created() {
    //for(var i in this.data) console.log(this.data[i])
  }
}
</script>

<style scoped>
.index-new-music-body {
  height: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  justify-content: center;
}

.new-music-list {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  margin: 0 28px;
}

.new-music-card {
  height: 90%;
  width: 158px;
  margin: 0 5px;
}

.a-left{
  position: absolute;
  left: 0px;
  top:85px;
}

.a-right{
  position: absolute;
  right: 0px;
  top:85px;
}
.new-music-card-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-title{
  font-size: 14px;
}
.card-author{
  font-size: 12px;
}
</style>